<template>
    <div 
    class="select-module"
    :class="theme"
    >
        <div 
        v-if="label"
        class="label"
        >
            {{label}}
        </div>

        <div 
        class="list-body"
        :class="{'not-auto-expand': showMore, expand: expandController}"
        >
            <div 
            ref="list"
            class="items-group"
            >
                <div 
                v-if="!single"
                class="all item"
                :class="{active: (!selected || !selected.length),}" 
                @click="handlerAllClick"
                >
                    全部
                </div>

                <div 
                class="item" 
                :class="{active: item.isSelected,}"
                v-for="(item,index) in arrData" 
                :key="item[keyName]"
                @click="handlerClick(item, index)"
                >
                    {{item[contentName]}}
                </div>
            </div>
        </div>

        <div 
        v-if="showMoreController"
        class="show-more"
        >
            <div 
            v-if="!expandController"
            class="btn"
            @click="shiftExpandHandler"
            >
                <i class="el-icon-arrow-down"></i>
                更多
            </div>

            <div 
            v-if="expandController"
            class="btn"
            @click="shiftExpandHandler"
            >
                <i class="el-icon-arrow-up"></i>
                折叠
            </div>
        </div>
    </div>
</template>

<script>
import MODEL from '@/mixins/model'
export default {
    mixins: [MODEL],
    props: {
        value: {
            type: Array,
            default: () => [],
        },
        keyName:{
            type: String,
            default: '',
        },
        label:{
            type: String,
            default: '',
        },
        contentName: {
            type: String,
            default: '',
        },
        options:{
            type: [Object,Array],
            default: () => ({}),
        },
        // 默认选中值
        defActive:{
            type: String,
            default: '',
        },
        // 仅单选
        single: {
            type: Boolean,
            default: false,
        },
        // 使用更多按钮
        showMore: {
            type: Boolean,
            default: false,
        },
        theme: {
            type: String,
            default: 'default',
        },
    },
    data() {
        return {
            arrData: [],

            showMoreController: false,
            expandController: false,
        };
    },
    watch: {
        selected: {
            handler(val) {
                this.model = val.map(item => item[this.keyName]);
            },
            deep: true,
        },
        options: {
            handler() {
                this.bindInnerData();
            },
            deep: true,
            immediate: true,
        },
        defActive:{
            handler(){
                this.setDefaultSel();
            },
            immediate:true
        },
    },
    computed: {
        selected(){
            if (
                !this.arrData 
                || !this.arrData.length
            ) {
                return [];
            }

            return this.arrData.filter(item => item.isSelected);
        },
    },
    methods: {
        bindInnerData () {
            this.arrData = this.options.map(function(item){
                return {
                    ...item,
                    isSelected: false,
                };
            });

            this.$nextTick(() => {
                this.checkShowMoreBtn();
            });
        },
        /**
         * 检查是否需要展示更多按钮
         */
        checkShowMoreBtn() {
            if (!this.showMore) {
                return;
            }

            var list = this.$refs.list;

            this.showMoreController = (list.clientHeight > 33);
        },
        handlerClick (item,index) {
            if (this.single) {
                this.reset();
            }

            this.$set(item, 'isSelected', !item.isSelected);

            this.$emit('click', item, index);
        },
        handlerAllClick(){
            this.reset();

            this.$emit('click', null, 0);
        },
        reset () {
            this.arrData.forEach(item => {
                this.$set(item, 'isSelected', false);
            });
        },
        setDefaultSel () {
            if (!this.defActive) {
                return;
            }

            var defIndex = this.arrData.findIndex(item => {
                return item.valuename === this.defActive;
            });

            if (!~defIndex) {
                return;
            }

            this.reset();
            this.$set(this.arrData[defIndex], 'isSelected', true);
        },
        // 切换展开状态
        shiftExpandHandler() {
            this.expandController = !this.expandController;
        },
    },
    mounted () {
        
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss'; 
.select-module{
    display: flex;

    .label{
        min-width: 70px;
        font-weight: bold;
        text-align: right;
        line-height: 1em;
        padding: 6px 0;
    }

    .list-body{
        flex: 1;

        &.not-auto-expand{
            height: 33px;
            overflow: hidden;
            transition: all .3s;

            &.expand{
                height: auto;
            }
        }
    }

    .items-group{
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;

        .item {
            cursor: pointer;
            margin-right: 6px;
            margin-bottom: 7px;
            padding: 6px;
            line-height: 1em;

            &:hover{
                background-color: $primaryColor;
                color: white;
            }
        }

        .active {
            background-color: $primaryColor;
            color: white;
        }
    }

    .show-more{
        padding: 6px 0;
        font-size: 12px;

        .btn{
            cursor: pointer;
            line-height: 1em;
        }
    }

}

.data-export{
    display: block;

    .label{
        text-align: left;
    }

    .items-group{
        .item{
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }
    }
}
</style>